<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>七夕活动-留言</title>
    <script src="../Js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="../Js/Config.js" type="text/javascript"></script>
    <script src="../Js/Common.js" type="text/javascript"></script>

    <!--    页面样式    -->
    <link href="../Css/all.css" rel="stylesheet" type="text/css"/>

    <!--    弹窗插件    -->
    <script src="../Js/Msg/jquery.growl.js" type="text/javascript"></script>
    <link href="../Js/Msg/jquery.growl.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div style="margin-top: 50px">
    <a href="javascript:void(0)" class="logout">退出登录</a>
</div>
<div>留言列表</div>

<table border="1px solid #cccccc" id="msgList">
    <tr>
        <td width="500">留言</td>
        <td width="100">作者</td>
        <td width="100">时间</td>
        <td width="100">点赞</td>
    </tr>
    <!--        <tr id="">-->
    <!--            <td>祝大家新年快乐</td>-->
    <!--            <td>小花</td>-->
    <!--            <td>2020-12-17 11:42:03</td>-->
    <!--        </tr>-->
</table>

<div class="send-msg">
    <form method="post" name="msgBody">
        <span>请输入祝福语：</span>
        <input name="bless" placeholder="请输入祝福语">
        <input type="button" name="submit" value="提交">
    </form>
</div>

<div style="margin-top: 50px">
    <a href="javascript:void(0);" id="getCDK">领取CDK</a>
    <div id="myCDK" style="display: none">我的CDK：</div>
</div>

<div style="margin-top: 50px">
    <a href="rank.html">排行榜>>>>>>></a>
</div>

</body>
<script>
    $(function () {
        let pageNo = 1;
        let pageSize = 20;

        loadList(pageNo, pageSize);

        function loadList(pageNo, pageSize) {
            requestHost('msg/list', {pageNo: pageNo, pageSize: pageSize}, 'GET').then(function (res) {
                let str = ''
                for (let item of res.data.list) {
                    str += `<tr>
                                <td>${item.text}</td>
                                <td>${item.username}</td>
                                <td>${item.created_at}</td>
                                <td>
                                    <button type="button" class="clickEvent" data-msgid="${item.userid}">牛B</button>
                                </td>
                            </tr>`
                }
                $("#msgList").append(str);

                pageNo++;
            })
        }

        //点赞
        $("#msgList").on('click', '.clickEvent', function () {
            let formData = $(this).data()
            requestHost('msg/like', formData, 'POST').then(function (res) {
                $.growl.notice({
                    title: "点赞成功",
                    message: res.msg
                });
            })
        })


        //留言
        $("input[name=submit]").click(function (e) {
            let formData = $("form[name=msgBody]").serializeArray()
            requestHost('msg/insert', formData, 'POST').then(function (res) {
                $.growl.notice({
                    title: "留言成功",
                    message: res.msg
                });
                location.reload()
            })
        });

        $("#getCDK").click(function () {
            requestHost('cdk/get', {}, 'GET').then(function (res) {
                $("#myCDK").text("我的CDK：" + res.data.cdk).show()

                $.growl.notice({
                    title: "领取成功",
                    message: res.msg
                });
            })
        });

        $(".logout").click(function () {
            clearToken()
            window.location.href = 'login.html';
        })


        requestHost('cdk/mycdk', {}, 'GET').then(function (res) {
            if (res.data.cdk) {
                $("#myCDK").text("我的CDK：" + res.data.cdk).show()
                $("#getCDK").hide()
            }
        })


    })
</script>
</html>